<template>
  <div class="booking-detail">
    <h2>预约信息🏨</h2>
    <div class="detail-item">
      <span class="title">酒店名称</span>
      <span
        class="data"
        style="cursor: pointer"
        @click="$router.push(`/HotelDetail/${bookingDetail.HotelId}`)"
      >
        {{ bookingDetail.hotelName }}
      </span>
    </div>
    <div class="detail-item">
      <span class="title">封面</span>
      <span class="data" style="cursor: pointer" @click="showHotelImg"
        >查看</span
      >
      <el-image
        ref="previewImage"
        :src="bookingDetail.cover"
        :preview-src-list="[bookingDetail.cover]"
        style="display: none"
      ></el-image>
    </div>
    <div class="detail-item">
      <span class="title">预约时间</span>
      <span class="data">
        {{ formatDate(bookingDetail.bookingStartTime) }} -
        {{ formatDate(bookingDetail.bookingEndTime) }}
      </span>
    </div>
    <div class="detail-item" v-show="bookingDetail.status === 2">
      <span class="title">使用时间</span>
      <span class="data">{{ formatDate(bookingDetail.useTime) }}</span>
    </div>
    <div class="detail-item">
      <span class="title">价格</span>
      <span class="data">{{ bookingDetail.price || "免费" }}</span>
    </div>
    <div class="detail-item">
      <span class="title">预约人</span>
      <span class="data">{{ bookingDetail.name }}</span>
    </div>
    <div class="detail-item">
      <span class="title">预约手机号</span>
      <span class="data">{{ bookingDetail.phone }}</span>
    </div>
    <div class="detail-item">
      <span class="title">预约身份证</span>
      <span class="data">{{ bookingDetail.idCard }}</span>
    </div>
    <div class="detail-item">
      <span class="title">人数</span>
      <span class="data">{{ bookingDetail.number }}</span>
    </div>
    <div class="detail-item">
      <span class="title">状态</span>
      <span>
        <el-tag
          size="mini"
          class="status"
          :type="switchStatusStr(bookingDetail.status)"
          >{{ switchStatus(bookingDetail.status) }}</el-tag
        >
      </span>
    </div>
    <hr style="margin-bottom: 20px; height: 1px; border-top: 1px solid #ccc" />
    <h2>房间信息🏠</h2>
    <div class="detail-item" style="flex-direction: column">
      <div class="booking-person">
        <div class="item">
          酒店名：<span>{{ bookingDetail.hotelName }}</span>
        </div>
        <div class="item">
          酒店房间规格：<span>{{ bookingDetail.hotelSpecsName }}</span>
        </div>
        <div class="item">房间价格：{{ bookingDetail.roomPrice }}</div>
      </div>
    </div>
    <div class="option" v-show="bookingDetail.status === 1">
      <div class="qr-code">
        <img :src="qrcode" alt="" />
        <span>扫码使用</span>
      </div>
      <div class="operate">
        <el-button
          type="primary"
          class="btn"
          @click="cancelBooking"
          :loading="bookingLoading"
          >取消预约</el-button
        >
        <el-button
          type="primary"
          class="btn"
          @click="$router.push(`/booking/hotel/use/${bookingDetail.id}`)"
          >点击使用</el-button
        >
        <p>* 从当前时间到预约时间之前皆可使用</p>
      </div>
    </div>
  </div>
</template>

<script>
import {
  cancelHotelBooking,
  getHotelBookingById,
  getHotelQrCode,
} from "@/api/user/booking";
import userModule from "@/utils/userInfo";
import { MessageBox } from "element-ui";

export default {
  name: "BookingDetail",
  props: ["id"],
  data() {
    return {
      bookingDetail: {},
      qrcode: "data:image/png;base64,",
      bookingLoading: false,
    };
  },
  async created() {
    await this.getBookingDetail();
    await this.getQRcode();
  },
  methods: {
    // 获取预约详情
    async getBookingDetail() {
      const res = await getHotelBookingById({ id: this.id });
      this.bookingDetail = res.data;
    },
    // 查看封面
    showHotelImg() {
      this.$refs.previewImage.showViewer = true;
    },
    // 获取二维码
    async getQRcode() {
      if (this.bookingDetail.status === 1) {
        const res = await getHotelQrCode({ id: this.id });
        this.qrcode = this.qrcode + res.data;
      }
    },
    // 取消预约
    async cancelBooking() {
      MessageBox.confirm("确定取消预约吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        try {
          this.bookingLoading = true;
          const res = await cancelHotelBooking({
            hotelId: this.bookingDetail.hotelId,
            hotelSpecsId: this.bookingDetail.hotelSpecsId,
            userId: userModule.getUser().id,
            bookingId: this.id,
          });
          this.getBookingDetail();
        } finally {
          this.bookingLoading = false;
        }
      });
    },
    // 时间格式判断
    padZero(num) {
      return num < 10 ? "0" + num : num;
    },
    // 时间格式化
    formatDate(timeArray) {
      if (!timeArray) return "暂无时间";
      let year = timeArray[0];
      let month = this.padZero(timeArray[1]);
      let day = this.padZero(timeArray[2]);
      let hour = this.padZero(timeArray[3]);
      let minute = this.padZero(timeArray[4]);
      let second = this.padZero(timeArray[5]) || "00";
      return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
    },
    // 判断状态
    switchStatus(status) {
      switch (status) {
        case 0:
          return "已取消";
        case 1:
          return "已预约";
        case 2:
          return "已使用";
        case -1:
          return "已过期";
      }
    },
    // 判断状态字符
    switchStatusStr(status) {
      switch (status) {
        case 0:
          return "warning";
        case 1:
          return "success";
        case 2:
          return "primary";
        case -1:
          return "danger";
      }
    },
  },
};
</script>

<style lang="less" scoped>
.booking-detail {
  margin: 16px auto;
  padding: 20px;
  width: 50%;
  text-align: left;
  .detail-item {
    display: flex;
    margin: 20px 0;
    .title {
      display: inline-block;
      width: 100px;
      font-size: 17px;
      font-weight: bold;
      text-align: right;
    }
    .data {
      display: inline-block;
      margin-left: 16px;
      padding-bottom: 6px;
      width: 500px;
      font-size: 15px;
      color: #999;
      border-bottom: 1px solid #ccc;
    }
    .status {
      margin-left: 10px;
      font-size: 14px;
      box-shadow: 0 2px 0 rgba(0, 0, 0, 0.15);
    }
    .booking-person {
      margin-left: 20px;
      width: 800px;
      line-height: 50px;
      .item {
        margin: 16px 10px;
        padding-left: 8px;
        box-shadow: 3px 2px 8px 1px rgba(0, 0, 0, 0.1);
      }
    }
  }
  .option {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin: 0 auto;
    width: 60%;
    height: 200px;
    .qr-code {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 150px;
      height: 150px;
      span {
        font-size: 13px;
      }
      img {
        width: 100%;
        height: 100%;
      }
    }
    .operate {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-end;
      height: 120px;
      .btn {
        width: 120px;
      }
      p {
        font-size: 13px;
      }
    }
  }
}
</style>